﻿<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="../Shared/Site.master" Inherits="System.Web.Mvc.ViewPage<ECube.Web.CMS.Models.Page>" %>
<%@ Import Namespace="ECube.Web.CMS.Extensions"%>
<asp:Content ID="Content0" ContentPlaceHolderID="PageToolbox" runat="server">
<%if (Model.Profile.IsDesign)
  { %>
  <div class="ui-widget-header ui-corner-all">
    <input id="add" type="button" class="ui-button" onclick = "javascript:AddWidget('ggg', 'wContainer_1');" value="Add" />
    <input type="button"  class="ui-button" onclick="javascript:SavePage();" value="保存页面" />  
    <input type="button"  class="ui-button" onclick="javascript:$('#widgetgallery').dialog('open');" value="部件库" />  
  </div>
<%} %>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<% Html.WidgetContainer("WidgetContainer_1");%>
</asp:Content>
<asp:Content ID="PageDock1" runat="server" contentplaceholderid="PageDock">
<div id="dock">
    <div id="widgetgallery" isAjax="true"  title="部件库">
    <h3 style="text-align:center">全局部件</h3>
       <div>
         <div class="ui-widget movable" type="ECube.Web.CMS.Models.Widget">
            <div class="ui-widget-header ui-corner-top">基础部件</div>
            <div class="widget-content ui-widget-content ui-corner-bottom">
                基础部件用于直接显示较小的内容或指定的View。
            </div>
         </div>
        </div>
    <h3 style="text-align:center">本站部件</h3>
        <div>&nbsp;<br /></div>  
    </div>
 </div>
</asp:Content>
<asp:Content ID="HeadCssFiles1" runat="server" contentplaceholderid="HeadCssFiles">
<style type="text/css"> 
#page{padding-right:200px;}
#dock{margin:0px; padding:0px; list-style:none; position:fixed; top:0px; height:100%; z-index:100;width:200px; background-color:#f0f0f0; right:0px;} 
.widget-place {  margin: 0;  padding: 0;    height: auto; list-style: none; min-height: 400px;}
.widget-placeholder { border: #000 dashed 1px; color: #000;  margin: 1em;  background-color: #ebebeb;}
.ui-widget { margin:1em;}
.ui-widget-header { padding: 0.2em; }
.ui-widget-content { padding: 0.5em;  }
.movable > .ui-widget-header{cursor:move;}
.widget-menu a { margin: 0 0 0 0.5em;  }
</style>
</asp:Content>
<asp:Content ID="HeadScripts1" runat="server" contentplaceholderid="HeadScripts">
<script src="<%=Url.Content("~/Scripts/jquery.ui/ui/jquery-ui-1.8.custom.js") %>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/jquery.easywidgets.js") %>" type="text/javascript"></script>
<script src="<%=Url.Content("~/Scripts/jquery.json.js") %>" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Scripts1" runat="server" contentplaceholderid="Scripts">
<script type="text/javascript">


    var EASettings = { selectors: { 
        widget: ".widget-place > .ui-widget",
        header: ".ui-widget-header",
        content: ".ui-widget-content"}
    };


//var WidgetGallery = function(selector)
//{
//    this.selector = selector;
//    this.isAjax = $(selector).attr("isAjax") === 'true' ? true : false;
//    
//    this.loadAjax = function()
//    {
//        alert(this.selector);
//    };
//    
//    this.Show = function()
//    {
//    };
//    this.Hide = function()
//    {
//    };
//    
//    if(this.isAjax) this.loadAjax();
//};


var WidgetContainer = function(wc)
{
    this.id = wc.attr("id");
    this.Widgets = new Array();
    var  ws = wc.children(".ui-widget");
    for(var i=0;i<ws.length;i++)
    {
        var typ = $(ws[i]).attr('type');
        if(typ == null) typ = "";
        this.Widgets.push({ type:typ,
                            Title:$(ws[i]).children(".ui-widget-header").text().trim(),
                            Content:$(ws[i]).children(".ui-widget-content").html()
                         });
    }
    
}
var PageProfile=function(selector)
{
    this.WidgetContainers = new Array();
    var arr = $(selector);
    for(var i=0;i<arr.length;i++)
    {
        var wc = new WidgetContainer($(arr[i]));
        this.WidgetContainers.push(wc);   
    }        
};


// DOM ready!

$(function() {
    $.fn.EasyWidgets(EASettings);

    $('#widgetgallery').accordion({ header: "h3", fillSpace: true, clearStyle: true });

//    $("#widgetgallery").dialog({
//        bgiframe: true,
//        autoOpen: true,
//        closeOnEscape: false,
//        modal: false,
//        position: "right"
//    });

    $("#widgetgallery .ui-widget").draggable({
        connectToSortable: '.widget-place',
        helper: 'clone',
        opacity: 0.6,
        appendTo: 'body',
        addClasses: false,
        cancel: '.widget-content',
        evert: 'invalid',
        start: function() { $("#widgetgallery").dialog('close'); },
        stop: function() { $("#widgetgallery").dialog('open'); },
        toSortable: function() {
            $.fn.EasyWidgets(EASettings); //重新初始化 sortables
            return true;
        }
    });

    $("#widgetgallery").dialog("widget").dblclick(function() {
        $("#page").after("<div id='dock'></div>");
        $("#dock").append($('#widgetgallery'));
    });
    //  $.extend(WidgetGallery.prototype,{
    //        
    //    });

    // var wg = new WidgetGallery("#WidgetGallery");

});


function AddWidget(url, placeId){
//alert($.toJSON(pageProfile));
//    $.ajax({
//            type:"POST",
//            dataType:"json",
//            contentType:"application/json;charset=utf-8",  
//            url:url,
//            //processData: false,
//            data: '{PageProfile:' + $.toJSON(pageProfile) +'}',
//            success: function(response){alert(response);}
//          });
   $.fn.AddEasyWidget(url, placeId, EASettings);   
   
}


function SavePage()
{
    var url= self.location.href;
    var  pageProfile = new PageProfile(".widget-place");
     $.ajax({
            type:"POST",
            dataType:"json",
            contentType:"application/json;charset=utf-8",  
            url:url,
            //processData: false,
            data: $.toJSON(pageProfile),
            success: function(response)
                {
                    alert(response);
                }
          });
          
    pageProfile = null;
    return false;
}

</script>
</asp:Content>
